<template>
  <van-pull-refresh v-model="isLoading" :animation-duration="200" @refresh="onRefresh">
    <template #pulling="props">
      <img class="up-load" src="@/assets/load-up.png" :style="{ transform: `scale(${props.distance / 80})` }"/>
    </template>  
    <template #loosing>
      <img class="up-load" src="@/assets/load-up.png" />
    </template>
    <template #loading>
      <img class="up-load" src="@/assets/load-up.png" />
      <div class="up-load up-load-box"></div>
    </template>
      <slot></slot>
  </van-pull-refresh>
</template>
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    }
  },
  data () {
    return {
      isLoading: false,
    }
  },
  watch: {
    value(val) {
      if (val == false) {
        this.isLoading = false
      }
    }
  },
  methods: {
    onRefresh () {
      this.$emit('input', true)
      this.$emit('refresh')
    },
  }
}
</script>
<style scoped>
/*up-load*/
.up-load{width:34px; box-sizing:border-box; position:absolute; top:0rem; left:calc(50% - 17px); border-radius:50%; height: 34px; border:1px solid #CCEEFF;}
.up-load-box{  border-top:12px solid #00A8FE; opacity:0.2; border-radius:50%; -webkit-animation:load 1.1s infinite linear;}
@-webkit-keyframes load{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}
</style>